<template>
	<div class="swap body" :style="{ background: data.web.background, color: data.web.color }">
		<div class="row" :style="{ background: data.web.Contentbackground }">
			<div class="text">
				<!-- 内容使用编辑器 -->
				<Tiptap :content="data.web.content[$i18n.locale]"></Tiptap>
			</div>
			<el-card class="box-card">
				<el-radio-group v-model="radio2">
					<el-radio-button label="swap">swap</el-radio-button>
					<el-radio-button label="addLiquidity">addLP</el-radio-button>

					<el-radio-button label="Removeliquidity">removeLP</el-radio-button>
				</el-radio-group>

				<swap :data="data" v-if="radio2 == 'swap'"></swap>
				<addLiquidity :data="data" v-if="radio2 == 'addLiquidity'"></addLiquidity>
				<Removeliquidity :data="data" v-if="radio2 == 'Removeliquidity'"></Removeliquidity>
			</el-card>
		</div>
	</div>
</template>
<script>
	import swap from '@/components/swap.vue'
	import addLiquidity from '@/components/addLiquidity.vue'
	import Removeliquidity from '@/components/Removeliquidity.vue'
	import Tiptap from '@/components/Tiptap.vue'
	export default {
		components: {
			Tiptap,
			swap,
			addLiquidity,
			Removeliquidity,
		},
		data() {
			return {
				radio2: 'swap',
			}
		},
		props: ['data'],
	}
</script>
<style>
	/* 允许用户设置css  */

	.swap .el-card__body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 15px;
	}
</style>
